import React from 'react';
import { Layout, Flex } from 'antd';
import { Link, useLocation } from 'react-router-dom';
import { HomeOutlined, UnlockOutlined, InfoCircleOutlined, FolderOutlined, ShoppingOutlined } from '@ant-design/icons';

const { Header } = Layout;

const HeaderBar = () => {
  const location = useLocation();
  
  const navItems = [
    {
      key: '/',
      label: '首页',
      icon: <HomeOutlined />,
      path: '/'
    },
    {
      key: '/unlock',
      label: '解锁',
      icon: <UnlockOutlined />,
      path: '/unlock'
    },
    {
      key: '/resource',
      label: '资源',
      icon: <FolderOutlined />,
      path: '/resource'
    },
    {
      key: '/about',
      label: '关于',
      icon: <InfoCircleOutlined />,
      path: '/about'
    }
  ];

  return (
    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 20px' }}>
      <style>
        {`
          @media (max-width: 768px) {
            .header-text {
              display: none !important;
            }
            .nav-text {
              display: none !important;
            }
            .logo-margin {
              margin-right: 0 !important;
            }
            .nav-margin {
              margin-left: 20px !important;
            }
          }
        `}
      </style>
      <Flex align="center" style={{ height: '64px' }}>
        <div style={{ fontSize: 24 }}>
          <Link to="/" style={{ 
            color: '#fff', 
            fontWeight: 'bold',
            textDecoration: 'none',
            display: 'inline-flex',
            alignItems: 'center'
          }}>
            <ShoppingOutlined style={{ marginRight: 10, fontSize: 28 }} />
            <span className="header-text">
              UP包包
            </span>
          </Link>
        </div>
        <div style={{ flex: "1 0 auto", textAlign: "left", marginLeft: 50 }} className="nav-margin">
          {navItems.map(item => (
            <Link 
              to={item.path} 
              key={item.key}
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                margin: '0 10px',
                padding: '8px 12px',
                textDecoration: 'none',
                color: location.pathname === item.path ? '#1890ff' : 'rgba(255, 255, 255, 0.85)',
                borderRadius: '6px',
                transition: 'all 0.3s'
              }}
            >
              <span style={{ 
                fontSize: '16px',
                marginRight: '6px',
                color: location.pathname === item.path ? '#1890ff' : 'rgba(255, 255, 255, 0.85)'
              }}>
                {item.icon}
              </span>
              <span className="nav-text" style={{ 
                fontSize: '16px',
                fontWeight: location.pathname === item.path ? '500' : 'normal'
              }}>
                {item.label}
              </span>
            </Link>
          ))}
        </div>
      </Flex>
    </div>
  );
};

export default HeaderBar;